import styled from 'styled-components';
import { GlobalMargin, GlobalPadding } from '@/config/style-global';

export const DroppableStyle = styled.div`
	width: 350px;
	height: 150px;
	border-radius: 10px;
	border: 2px solid #b7c7fc;
	.droppable-item {
		width: 100%;
		height: 100%;
	}
`;

export const DraggableStyle = styled.div<{ is_dragging: string; is_sort?: string }>`
	/* position: relative;
	width: 100px;
	height: 60px;
	background: #fff;
	text-align: center;
	line-height: 60px;
	border-radius: 10px; */
	transition: all 0.3s;
	transform: scale(${(props) => (props.is_dragging === 'true' ? '1.1' : '1')});

	/* ${(props) =>
		props.is_sort === 'true'
			? 'border: 2px solid #aec4ff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);'
			: 'border: 2px solid #a4f8cf;'} */

	.draggable-button {
		width: 100%;
		height: 100%;
	}
`;

export const GridContentStyle = styled.div`
	width: 500px;
	border: 1px solid red;
	padding: ${GlobalPadding}px;

	display: grid;
	grid-template-columns: repeat(auto-fill, 100px);
	column-gap: ${GlobalMargin}px;
	row-gap: ${GlobalMargin}px;
`;
